<template>
  <div id="content">
    <van-notify id="van-notify" />
    <div id="logo">
    <van-dialog id="van-dialog" />
      <img id="logo" src="/static/8507410161c0285ba4762e346.png">
      <h1>学生教学信息中心</h1>
      <span>联通教学，助力成长</span>
      <!--      文档中有关于获取点击授权后的回调信息 -->
      <i-button open-type="getUserInfo"  @getuserinfo="getUserData" id="loginbtn" size="large" type="primary" shape="circle">登录</i-button>
      <h6>----------Power By YPY----------</h6>
    </div>
  </div>
</template>

<script>
  import Dialog from 'static/vant/dialog/dialog';
  import Notify from 'static/vant/notify/notify';
  export default {
    name: "index",
    data() {
      return {
        userInfo: {},
        avatarUrl: '',
        nickName: '',
        openid: '',
        isShowTips: false
      }
    },
    methods: {
      handleGetUserInfo() {
        wx.getUserInfo({
          success: (res) => {
            this.avatarUrl = res.userInfo.avatarUrl;
            this.nickName = res.userInfo.nickName;
            wx.cloud.callFunction({
              name: 'login',
              complete: res => {
                this.openid = res.result.openid
                this.userInfo = {
                  avatarUrl: this.avatarUrl,
                  nickName: this.nickName,
                  openid: this.openid
                };
                this.$store.commit("saveUserInfo", this.userInfo);
              }
            });
          },
          fail: (res) => {
            this.isShow = false;
            wx.navigateTo({
              url: '/pages/login/index'
            })
          }
        });
      },
      getUserData(data) {
        console.log(data);
        // 判断用户是否授权
        if (data.mp.detail.errMsg === 'getUserInfo:ok') {
          // 授权后重新获取一次用户信息，达到直接授权登录，而不是重新点击login获，或者重启应用
          this.handleGetUserInfo();
          Dialog.alert({
            title: 'Tips',
            message:  `
        1.下拉可以刷新当前空教室列表
        2.一个人只能申请当天教室一次，\n可提前申请其他教室
        3.若时间发生冲突，\n请根据联系方式解决问题
        4.若有问题请联系一教1201办公室
        `
          }).then(() => {
            setTimeout(() => {
              wx.navigateBack({
                delta: 1
              })
            },1000)
            Notify({ type: 'success', message: '登录成功' });
          });

        }
      }
    }
  }
</script>

<style scoped>
  page {
    background-color: #FFFAF0;
  }
  #logo {
    display:flex;
    justify-content: center;
  }
  #logo img {
    width: 350rpx;
    height: 350rpx;
    position: absolute;
    top: 18%;
  }
  #logo h1 {
    position: absolute;
    top: 45%;
    color: #707070;
    font-size: 50rpx;
    font-weight: bold;
  }
  #logo span {
    position: absolute;
    top: 60%;
    color: #707070;
    font-weight: bold;
  }
  #loginbtn {
    position: absolute;
    top: 65%;
    width: 300rpx;
  }
  h6 {
    position: absolute;
    bottom: 5%;
    color: #707070;
    font-size: 30rpx;
    font-weight: lighter;
  }
</style>
